<template>
  <div class="person">
    <h1>情况五：监视ref或reactive定义的对象类型中某个属性</h1>
    <h2>姓名:{{ person.name }}</h2>
    <h2>年龄:{{ person.age }}</h2>
    <h2>汽车:{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
    <button @click="changeName">改名字</button>
    <button @click="changeAge">改年龄</button>
    <button @click="changeCar1">改第一台车</button>
    <button @click="changeCar2">改第二台车</button>
    <button @click="changeAllCar">改所有车</button>
    <hr>

  </div>
</template>

<script setup lang="ts" name="Person">
    // watch只能监视以下四种数据：
    // ref定义的数据
    // reactive定义的数据
    // 函数返回的值
    // 包含上述内容的数组

    import {ref,reactive,watch} from 'vue'

    // 情况四
    let person = reactive({
        name:'张三',
        age:18,
        car:{
            c1:'奔驰',
            c2:'宝马'
        }
    })
    function changeName(){
        person.name += '~'
    }
    function changeAge(){
        person.age += 1
    }
    function changeCar1(){
        person.car.c1 = '奥迪'
    }
    function changeCar2(){
        person.car.c2 = '凯迪拉克'
    }
    function changeAllCar(){
        person.car = {c1:'雅迪',c2:'金箭'}
    }
    // watch(()=>{return person.name},(n,o)=>{
    //     console.log('person的name被修改了');
    // })
    
    watch([person.car,()=>person.name],(n,o)=>{
        console.log('person被修改',n,o);
    },{deep:true})


</script>

<style scoped>
    .person{
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 5px
    }
    li{
        font-size: 20px;
    }
</style>